<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>「CSS3 」动画详解</title>
        <style>
            @-webkit-keyframes exampleName {
                from {
                    -webkit-transform: rotateY(0deg);
                    background: #000000;
                }
                50% {
                    -webkit-transform: rotateY(180deg);
                    background: #00fa7e;
                }
                to {
                    -webkit-transform: rotateY(0deg);
                    background: #008dff;
                }
            }

            @-moz-keyframes exampleName {
                from {
                    -moz-transform: rotateY(0deg);
                    background: #000000;
                }
                50% {
                    -moz-transform: rotateY(180deg);
                    background: #00fa7e;
                }
                to {
                    -moz-transform: rotateY(0deg);
                    background: #008dff;
                }
            }

            @-o-keyframes exampleName {
                from {
                    -o-transform: rotateY(0deg);
                    background: #000000;
                }
                50% {
                    -o-transform: rotateY(180deg);
                    background: #00fa7e;
                }
                to {
                    -o-transform: rotateY(0deg);
                    background: #008dff;
                }
            }

            @keyframes exampleName {
                from {
                    -ms-transform: rotateY(0deg);
                    transform: rotateY(0deg);
                    background: #000000;
                }
                50% {
                    -ms-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                    background: #00fa7e;
                }
                to {
                    -ms-transform: rotateY(0deg);
                    transform: rotateY(0deg);
                    background: #008dff;
                }
            }


            #division {
                width: 300px;
                height: 100px;
                font-size: 2em;
                text-align: center;
                line-height: 100px;
                color: #FFF;
                -webkit-animation: exampleName 5s linear 1s 1 normal;
                -moz-animation: exampleName 5s linear 1s 1 normal;
                -o-animation: exampleName 5s linear 1s 1 normal;
                -webkit-animation-fill-mode: both;
                -moz-animation-fill-mode: both;
                -o-animation-fill-mode: both;
            }

            #division2 {
                width: 300px;
                height: 100px;
                margin-top: 150px;
                font-size: 2em;
                text-align: center;
                line-height: 100px;
                color: #FFF;
                background: #000;
                -webkit-transition: -webkit-transform 3s linear 0s, background 2s linear 0s, color 2s linear 0s;
                -moz-transition: -moz-transform 3s linear 0s, background 2s linear 0s, color 2s linear 0s;
                -ms-transition: -ms-transform 3s linear 0s, background 2s linear 0s, color 2s linear 0s;
                -o-transition: -o-transform 3s linear 0s, background 2s linear 0s, color 2s linear 0s;
                transition: transform 3s linear 0s, background 2s linear 0s, color 2s linear 0s;
            }

            #division2:hover {
                background: #cccdd1;
                color: #000;
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);
            }
        </style>
    </head>
    <body>
        <div id="division">Animation</div>
        <div id="division2">Transition</div>
    </body>
</html>